<script lang="ts" setup>
import { computed } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, { Autoplay, Pagination, Navigation } from 'swiper';
import 'swiper/swiper.min.css';
import 'swiper/components/navigation/navigation.min.css';
import 'swiper/components/pagination/pagination.min.css';
import { useI18n } from 'vue-i18n';
import { useCommonStore } from '@/stores/common';

import bannerImg from '@/assets/home/banner/homeBanner.jpg';
import bannerImg1 from '@/assets/home/banner/homeBanner1.png';
import bannerImg2 from '@/assets/home/banner/homeBanner2.png';
import bannerImg3 from '@/assets/home/banner/homeBanner3.png';
import bannerImg4 from '@/assets/home/banner/homeBanner4.png';
import bannerImgEn from '@/assets/home/banner/homeBanner_en.jpg';
import bannerImgEn1 from '@/assets/home/banner/homeBanner_en1.jpg';
import bannerImgEn2 from '@/assets/home/banner/homeBanner_en2.jpg';
import bannerImgEn3 from '@/assets/home/banner/homeBanner_en3.jpg';
import homeBannerMo from '@/assets/home/banner/homeBannerMo.png';
import homeBannerMo1 from '@/assets/home/banner/homeBannerMo1.jpg';
import homeBannerMo2 from '@/assets/home/banner/homeBannerMo2.jpg';
import homeBannerMo3 from '@/assets/home/banner/homeBannerMo3.jpg';
import homeBannerMo4 from '@/assets/home/banner/homeBannerMo4.jpg';
import homeBannerMoEn from '@/assets/home/banner/homeBannerMoEn.png';
import homeBannerMoEn1 from '@/assets/home/banner/homeBannerMoEn1.png';
import homeBannerMoEn2 from '@/assets/home/banner/homeBannerMoEn2.png';
import homeBannerMoEn3 from '@/assets/home/banner/homeBannerMoEn3.jpg';
import bannerWhite from '@/assets/pc_banner_white.png';
import moBanner from '@/assets/Banner-mobile.png';
import ArrowRight from '~icons/app/icon-arrow.svg';

SwiperCore.use([Autoplay, Pagination, Navigation]);
const { t } = useI18n();
const useCommon = useCommonStore();
const onSwiper = (swiper: any) => {
  // console.log(swiper);
  swiper.el.onmouseout = function () {
    swiper.navigation.$nextEl.removeClass('show');
    swiper.navigation.$prevEl.removeClass('show');
  };
  swiper.el.onmouseover = function () {
    swiper.navigation.$nextEl.addClass('show');
    swiper.navigation.$prevEl.addClass('show');
  };
};
const homeBannerZh = [
  {
    id: 0,
    pcBanner: bannerImg,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMo,
    link: '', //跳转到文档快速入门
    targetTap: 0,
    title: t('banner.title'),
    desc: t('banner.desc'),
    btn: t('view_details'),
  },
  {
    id: 1,
    pcBanner: bannerImg1,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMo1,
    link: '/zh/news/version1.6/',
    targetTap: 1,
    title: '',
    desc: '',
    btn: '',
  },
  {
    id: 2,
    pcBanner: bannerImg2,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMo2,
    link: '/zh/news/2022-04-27/',
    targetTap: 1,
    title: '',
    desc: '',
    btn: '',
  },
  {
    id: 3,
    pcBanner: bannerImg3,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMo3,
    link: '',
    targetTap: 1,
    title: 'https://www.openeuler.org/zh/internship/',
    desc: '',
    btn: '',
  },
  {
    id: 4,
    pcBanner: bannerImg4,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMo4,
    link: '/zh/community/evangelist/',
    targetTap: 1,
    title: '',
    desc: '',
    btn: '',
  },
];
const homeBannerEn = [
  {
    id: 0,
    pcBanner: bannerImgEn,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMoEn,
    link: '', //英文文档快速入门
    targetTap: 0,
    title: t('banner.title'),
    desc: t('banner.desc'),
    btn: t('view_details'),
  },
  {
    id: 1,
    pcBanner: bannerImgEn1,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMoEn1,
    link: '/en/news/version1.6/',
    targetTap: 1,
    title: '',
    desc: '',
    btn: '',
  },
  {
    id: 2,
    pcBanner: bannerImgEn2,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMoEn2,
    link: '/en/news/2022-04-27/',
    targetTap: 1,
    title: '',
    desc: '',
    btn: '',
  },
  {
    id: 3,
    pcBanner: bannerImgEn3,
    leftImg: bannerWhite,
    rightImg: bannerWhite,
    moBanner: homeBannerMoEn3,
    link: '/en/community/evangelist/',
    targetTap: 1,
    title: '',
    desc: '',
    btn: '',
  },
];
const homeBanner = computed(() =>
  useCommon.language === 'zh' ? homeBannerZh : homeBannerEn
);
</script>

<template>
  <swiper
    class="home-banner"
    :loop="true"
    :pagination="{
      clickable: true,
    }"
    :navigation="true"
    @swiper="onSwiper"
  >
    <swiper-slide v-for="item in homeBanner" :key="item.id">
      <a
        :target="item.targetTap === 1 ? '_blank' : '_self'"
        class="banner-panel"
        :href="item.link"
      >
        <!-- <div
          class="left-img block"
          :style="{ backgroundImage: 'url(' + item.leftImg + ')' }"
        ></div> -->
        <div
          class="banner-panel-cover isPCshow"
          :style="{ backgroundImage: 'url(' + item.pcBanner + ')' }"
        >
          <div
            class="banner-panel-content flex-column"
            v-if="item.title !== ''"
          >
            <!-- <p class="title">{{ item.title }}</p>
            <p class="desc">{{ item.desc }}</p>
            <div class="action">
              <o-button placement="right">
                {{ item.btn }}
                <template #right
                  ><o-icon><arrow-right></arrow-right></o-icon
                ></template>
              </o-button>
            </div> -->
          </div>
        </div>
        <img class="isH5show" :src="item.moBanner" alt="" />
        <!-- <div
          class="right-img block"
          :style="{ backgroundImage: 'url(' + item.rightImg + ')' }"
        ></div> -->
      </a>
    </swiper-slide>
  </swiper>
</template>

<style lang="scss" scoped>
.home-banner {
  height: 480px;
  position: relative;

  .banner-panel {
    position: absolute;
    background-color: var(--theme-card-bg);
    display: flex;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all 0.33s;
    &-content {
      width: 1416px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      .title {
        font-size: 64px;
        font-weight: normal;
        color: var(--theme-white);
        line-height: 84px;
      }
      .desc {
        font-size: 24px;
        font-weight: normal;
        color: var(--theme-white);
        line-height: 32px;
        margin-top: 12px;
      }
      .action {
        margin-top: 35px;
        .o-icon {
          color: var(--theme-active-hover);
        }
      }
      .o-button {
        color: var(--theme-white);
        border-color: var(--theme-white);
      }
    }
    &-cover {
      // max-width: 1920px;
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
    }
    .isH5show {
      display: none;
    }
    .isPCshow {
      display: block;
    }
  }
}

:deep(.swiper-pagination) {
  width: 1416px;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
  .swiper-pagination-bullet {
    width: 40px;
    height: 2px;
    opacity: 1;
    background: rgba(207, 211, 215, 0.6);
    border-radius: 0;
    margin: 0 4px;
  }
  .swiper-pagination-bullet-active {
    background: var(--theme-alert);
    opacity: 1;
  }
}
:deep(.swiper-button-prev) {
  width: 32px;
  height: 32px;
  background: var(--theme-gary);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s;
  &:after {
    font-size: 20px;
    color: var(--theme-disable);
  }
  &.show {
    opacity: 1;
  }
}
:deep(.swiper-button-next) {
  width: 32px;
  height: 32px;
  background: var(--theme-gary);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s;
  &:after {
    font-size: 20px;
    color: var(--theme-disable);
  }
  &.show {
    opacity: 1;
  }
}
@media screen and (min-width: 1921px) {
  .block {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .center-img {
    -webkit-box-flex: 222;
    -ms-flex: 222;
    flex: 222;
  }
  .banner-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  .home-banner {
    .banner-panel-content {
      width: 1080px;
      padding: 0 16px;
      .title {
        font-size: 48px;
        line-height: 60px;
      }
      .desc {
        font-size: 16px;
      }
    }
  }
  :deep(.swiper-pagination) {
    width: 1080px;
    padding: 0 16px;
  }
}

@media screen and (max-width: 1100px) {
  .home-banner {
    height: 400px;
  }
  :deep(.swiper-pagination) {
    width: 100%;
  }
}
@media screen and (min-width: 640px) and (max-width: 824px) {
  .home-banner {
    height: 320px;
  }
}
@media screen and (max-width: 639px) {
  .isPCshow,
  .block {
    display: none !important;
  }
  .banner-panel {
    position: static;
  }
  .home-banner {
    height: auto !important;
  }
  .isH5show {
    display: block !important;
    width: 100%;
  }
}
</style>
